<template>
  <!-- 动态绑定属性v-bind,语法糖 -->
  <a v-bind:href="bdUrl">百度</a>
  <a :href="bdFyUrl" target="_blank">百度翻译</a>
  <hr />
  <!-- v-bind绑定class -->
  <div :class="{ aaa: true }">2222</div>
  <div :class="{ aaa: false }">2222</div>
  <!-- 多个class加在一起 -->
  <div class="ddd" :class="{ aaa: true, bbb: true }">444</div>
  <!-- 绑定变量及对象，数组语法 -->
  <div :class="{ aaa: isShow }">3333</div>
  <div :class="classObj">3333</div>
  <div :class="['aaa', className, { ccc: isShow }]">3333</div>
  <hr />
  <!-- 绑定style -->
  <span :style="{ color: 'red', fontSize: '20px' }">aaa</span>
  <span :style="{ color: red }">aaa</span>
  <span :style="{ color: isShow ? 'pink' : 'blue' }">aaa</span>
  <span :style="aaaStyle">aaa</span>
  <span :style="getAaaStyle()">aaa</span>
  <span :style="[aaaStyle]">vvaaabb</span>
  <hr />
  <!-- 动态绑定属性名称和属性值 -->
  <div :[className]="className">6666</div>
  <hr />
  <!-- 此方法将testObj对象中的属性直接绑定到属性 -->
  <div v-bind="testObj">777</div>
  <div :="testObj">888</div>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'HelloWorld',
  setup() {
    const bdFyUrl = 'https://fanyi.baidu.com/?aldtype=16047#auto/zh'
    const bdUrl = 'https://www.baidu.com'
    const isShow = true
    const className = 'name'
    const classObj = {
      active: true,
    }
    const red = 'blue'
    const aaaStyle = {
      color: 'green',
      fontSize: '30px',
    }
    const getAaaStyle = () => ({ color: 'pink', fontSize: '30px' })
    const testObj = {
      class: 'aaa',
      style: {
        color: 'red',
      },
    }
    return { bdUrl, bdFyUrl, className, isShow, classObj, red, aaaStyle, getAaaStyle, testObj }
  },
}
</script>
<style scoped></style>
